<template>
  <div :key="`HistoryWeather${tab}`" class="equip-wrap-common">
    <px-button style="margin-top: 24px; margin-bottom: -8px" icon="ArrowLeft" type="primary" @click="backMainPage">返回 </px-button>
    <px-form class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px" style="padding-top: 24px">
      <px-row :gutter="16">
        <px-col :span="8">
          <px-form-item label="时间范围">
            <px-date-picker
              v-model="queryParams.timeRange"
              type="daterange"
              unlink-panels
              range-separator="至"
              start-placeholder="选择日期"
              end-placeholder="选择日期"
              :shortcuts="shortcuts"
            />
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <px-button type="primary" @click="queryTable">查询</px-button>
          <px-button @click="resetTable">重置</px-button>
        </px-col>
        <div class="tab-list">
          <div class="tab-item" @click="tab = 0">天气预报</div>
          <div class="tab-item active">历史天气</div>
        </div>
      </px-row>
    </px-form>
    <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 311px)" border>
      <px-table-column label="序号" width="50" align="center" fixed="left">
        <template #default="{ $index }">
          {{ $index + 1 + (queryParams.pageNum - 1) * queryParams.pageSize }}
        </template>
      </px-table-column>
      <px-table-column prop="fxDate" width="120px" label="日期" fixed="left" show-overflow-tooltip />
      <px-table-column prop="text" label="天气" />
      <px-table-column prop="tempMax" label="最高温度">
        <template #default="scope">
          <span>{{ scope.row.tempMax }}℃</span>
        </template>
      </px-table-column>
      <px-table-column prop="tempMin" label="最低温度">
        <template #default="scope">
          <span>{{ scope.row.tempMin }}℃</span>
        </template>
      </px-table-column>
      <px-table-column prop="humidity" label="相对湿度">
        <template #default="scope">
          <span>{{ scope.row.humidity }}%</span>
        </template>
      </px-table-column>
      <px-table-column prop="wetBulbTemp" label="湿球温度">
        <template #default="scope">
          <span>{{ scope.row.wetBulbTemp }}℃</span>
        </template>
      </px-table-column>
      <px-table-column prop="enthalpy" label="焓值">
        <template #default="scope">
          <span>{{ scope.row.enthalpy }}kj/kg</span>
        </template>
      </px-table-column>
      <px-table-column prop="dew" label="露点">
        <template #default="scope">
          <span>{{ scope.row.dew }}℃</span>
        </template>
      </px-table-column>
      <px-table-column prop="pressure" label="气压">
        <template #default="scope">
          <span>{{ scope.row.pressure }}hPa</span>
        </template>
      </px-table-column>
      <px-table-column prop="windDir" label="风向">
        <template #default="scope">
          <span>{{ scope.row.windDir }}</span>
        </template>
      </px-table-column>
      <px-table-column prop="windScale" label="风级">
        <template #default="scope">
          <span>{{ scope.row.windScale }}级</span>
        </template>
      </px-table-column>
      <px-table-column prop="precip" label="降水量">
        <template #default="scope">
          <span>{{ scope.row.precip }}mm</span>
        </template>
      </px-table-column>
      <px-table-column align="center" label="操作" width="60" fixed="right">
        <template #default="scope">
          <px-tooltip content="查看详情" placement="top">
            <px-button v-has="'ALL_EQUIP_INSPECT_TASK_DETAIL'" link type="primary" icon="Tickets" @click="handleView(scope.row)" />
          </px-tooltip>
        </template>
      </px-table-column>
    </px-table>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      class="equip-table-pagination"
      :total="total"
      @pagination="queryTable"
    />
    <px-dialog v-model="visible" destroy-on-close class="equip-dialog-wrap" title="历史24小时天气" width="1200px" @close="visible = false">
      <div class="weather">
        <div class="flex-row mb-[18px]">
          <div class="flex flex-center">
            <div class="day">
              <span>{{ day }}</span>
              <span class="city">{{ city }}</span>
            </div>
            <div class="temperature ml-[16px]">
              <span class="start">{{ getTemperature(weatherData.tempMin) }}</span> ~
              <span class="end">{{ getTemperature(weatherData.tempMax) }}</span>
            </div>
            <div class="weather-icon-box ml-[20px]">
              <i :class="`qi-${weatherData.icon}`" />
              <span class="ml-[8px] icon-text">{{ weatherData.text }}</span>
            </div>
            <div class="warning ml-[11px]">
              <px-tooltip v-for="item in warningData" :key="item.id" :content="item.text">
                <i :class="`qi-${item.type} ${item.severityColor} ml-[16px]`" />
              </px-tooltip>
            </div>
          </div>
        </div>
        <div class="flex-row">
          <px-scrollbar class="list-scroll">
            <WeatherList :weatherData="weatherData" />
          </px-scrollbar>
        </div>
        <div class="weather-box mb-[24px]">
          <HoursWeather v-if="visible" type="history" :dateTime="dateTime" />
        </div>
      </div>
    </px-dialog>
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: "ALL_BENCH_TASK_ANNOUNCEMENT"
});
import { queryHistoryWeatherDaily } from "@/api/bench";
import dayjs from "dayjs";
import { onMounted, reactive, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import HoursWeather from "../HoursWeather/index.vue";
import WeatherList from "../WeatherList/index.vue";
const router = useRouter();
const tab = defineModel("tab");
const shortcuts = [
  {
    text: "近一周",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    }
  },
  {
    text: "近一个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    }
  },
  {
    text: "近三个月",
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    }
  }
];
const state = reactive<any>({
  queryParams: {
    timeRange: [],
    pageNum: 1,
    pageSize: 20
  },
  tableData: [],
  total: 0,
  visible: false,
  city: "北京-大兴",
  day: "",
  dateTime: "",
  weatherData: {},
  warningData: {}
});
const { queryParams, tableData, total, visible, day, city, weatherData, warningData, dateTime } = toRefs(state);
const {
  query: { page }
} = useRoute();
const backMainPage = () => {
  if (page) {
    router.push({
      path: page
    });
  } else {
    router.push("/all/bench/home");
  }
};
// 进入页面时触发
onMounted(async () => {
  day.value = dayjs().format("YYYY年MM月DD日");
  dateTime.value = dayjs().format("YYYY-MM-DD");
  queryTable();
});
const getTemperature = (temp?: string) => {
  return temp ? `${temp}℃` : "-";
};
// 历史天气——查看详情
const handleView = async row => {
  visible.value = true;
  weatherData.value = row;
  dateTime.value = row.fxDate;
  day.value = dayjs(row.fxDate).format("YYYY年MM月DD日");
};
// 查询列表
const queryTable = async () => {
  const {
    timeRange: [startTime, endTime],
    ...others
  } = queryParams.value;
  const data: any = await queryHistoryWeatherDaily({
    startTime: startTime ? dayjs(startTime).format("YYYY-MM-DD") : startTime,
    endTime: endTime ? dayjs(endTime).format("YYYY-MM-DD") : endTime,
    ...others
  });
  tableData.value = data?.data || [];
  total.value = data?.total;
};
// 重置筛选条件和列表
const resetTable = async () => {
  queryParams.value = {
    timeRange: [],
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");

.equip-form {
  position: relative;
}

.equip-dialog-btn {
  text-align: right;
}

.tab-list {
  position: absolute;
  top: 50%;
  right: 0;
  display: flex;
  align-items: center;
  height: 41px;
  padding: 4px;
  margin-left: 32px;
  background: #f4f4f4;
  border-radius: 4px;
  transform: translateY(-50%);
}

.weather {
  color: #333;

  .calendar-day {
    height: 100%;
    padding: 0 16px;
  }

  .icon {
    font-size: 24px;
    color: rgb(59 130 246 / 100%);
    text-align: center;
  }

  .date {
    font-weight: bold;
    line-height: 22px;
  }

  .tab-list {
    display: flex;
    align-items: center;
    height: 41px;
    padding: 4px;
    margin-left: 32px;
    background: #f4f4f4;
    border-radius: 4px;
  }

  .tab-item {
    width: 88px;
    height: 34px;
    font-weight: 400;
    line-height: 34px;
    color: rgb(0 0 0 / 80%);
    text-align: center;
    cursor: pointer;
  }

  .active {
    color: #fff;
    background: #4089f7;
    border-radius: 4px;
    box-shadow: 0 2px 4px 0 #b5d2fe;
  }

  .flex-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .flex-center {
    align-items: center;
  }

  .temp {
    margin-right: 27px;
    font-size: 32px;
    font-weight: 600;
    line-height: 45px;
    color: #3b82f6;
  }

  .weather-icon-box {
    font-size: 22px;
  }

  .icon-text {
    font-size: 14px;
  }

  .city {
    margin-left: 16px;
    font-size: 18px;
    font-weight: 600;
    line-height: 25px;
    color: #000;
  }

  .weather-box {
    padding: 24px 0;
    background-color: #fff;
    border-radius: 8px;
  }

  .air-tag {
    padding: 0 7px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #fff;
    border-radius: 15px;
  }

  .warning {
    font-size: 24px;
  }

  .White {
    color: #eee;
  }

  .Blue {
    color: #4089f7;
  }

  .Green {
    color: #30d158;
  }

  .Yellow {
    color: yellow;
  }

  .Orange {
    color: #f59e0b;
  }

  .Red {
    color: #ef4444;
  }

  .Black {
    color: #333;
  }

  .list-scroll {
    flex-grow: 1;
    width: 20%;
  }
}

.tab-item {
  width: 88px;
  height: 34px;
  font-weight: 400;
  line-height: 34px;
  color: rgb(0 0 0 / 80%);
  text-align: center;
  cursor: pointer;
}

.active {
  color: #fff;
  background: #4089f7;
  border-radius: 4px;
  box-shadow: 0 2px 4px 0 #b5d2fe;
}
</style>
